// 公共表单组件
<template>
  <div>
    <el-form ref="formModel" :rules="rules" :model="formModel" label-width="100px" :hide-required-asterisk="false"
             :label-position="plus?(plus.position?plus.position:'right'):'right'">

      <el-form-item
        v-for="(item,keyIndex) in config"
        :key="item.id" :prop="item.model"
        :label="item.show==false||item.show==true?(item.show?item.name:null):item.name"
        class="itemlabel"
        inline-message
        :show-message="item.showMessage?item.showMessage:false"
      >

        <!-- 输入框 -->
        <template v-if="item.type == 'input'">
          <!-- 可以联想的输入框 -->
          <div v-if="!item.intel">
            <el-autocomplete
              popper-class="my-autocomplete"
              v-model="formModel[item.model]"
              :fetch-suggestions="querySearch"
              :placeholder="item.props.placeholder"
              @focus="focusIntel(item.model)">
              <svg-icon icon-class="zhi" slot="suffix" class="my-icon"/>
              <template slot-scope="{ item }">
                <div class="value">{{ item.value }}</div>
                <span class="info">{{ item.info }}</span>
              </template>
            </el-autocomplete>
          </div>
          <!-- 普通的输入框 -->
          <div v-else>
            <el-input
              @focus="showMessage(keyIndex, true)"
              @blur="showMessage(keyIndex, false)"
              v-if="item.show==false||item.show==true?item.show:true"
              :style="[{width: `${item.props.width}px`},]"
              :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
              :placeholder="item.props.placeholder"
              v-model="formModel[item.model]"/>
          </div>

        </template>


        <!-- 文本框 -->
        <el-input
          v-else-if="item.type == 'text'"
          type="textarea"
          :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
          :rows="item.props.rows"
          :placeholder="item.props.placeholder"
          v-model="formModel[item.model]">
        </el-input>

        <!-- select框 -->
        <el-select
          :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
          v-else-if="item.type == 'select'"
          v-model="formModel[item.model]"
          :placeholder="item.props.placeholder">
          <el-option
            v-for="i in item.props.options"
            :key="i.value"
            :label="i.label"
            :value="i.value">
          </el-option>
        </el-select>

        <!-- radio选择 -->
        <el-radio-group
          class="my-radio"
          v-else-if="item.type == 'radio'"
          v-model="formModel[item.model]">
          <el-radio
            @change="click(item, i.label)"
            :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
            v-for="i in item.props.radios"
            :key="i.value"
            :label="i.label">
            {{ i.value }}
          </el-radio>
        </el-radio-group>

        <el-date-picker
          type="date"
          v-else-if="item.type == 'time'"
          value-format="yyyy-MM-dd"
          :placeholder="item.startPlaceholder"
          v-model="formModel[item.model]"
        ></el-date-picker>

        <el-checkbox-group v-else-if="item.type == 'checkboxs'" v-model="formModel[item.model]">
          <el-checkbox v-for="i in item.props.checkboxs" :key="i.label" :label="i.label"></el-checkbox>
        </el-checkbox-group>
        <!-- 选择块 -->
        <el-radio-group
          @change="radioUp"
          v-else-if="item.type == 'checkbox'"
          v-model="formModel[item.model]">
          <el-radio-button
            :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
            v-for="i in item.props.checkboxs"
            :label="i.label"
            :key="i.label"
          >{{ i.label }}
          </el-radio-button>
        </el-radio-group>


        <!-- 表格 -->
        <el-table
          stripe border
          ref="table"
          :highlight-current-row="true"
          v-else-if="item.type == 'table'"
          :data="formModel[item.model]">

          <el-table-column v-if="plus.select" label="" width="50">
            <template slot-scope="scope">
              <!-- <el-checkbox
                @change="select(scope.row[plus.selectLabel])"
                :checked="plus.selectLabels.indexOf(scope.row[plus.selectLabel]) !== -1"
                :true-label="1"
                :false-label="2"
              ></el-checkbox> -->
              <el-checkbox
                @change="select(scope.row)"
                :checked="plus.selectLabels.indexOf(scope.row) !== -1"
                :true-label="1"
                :false-label="2"
              ></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column
            v-for="item in plus.tableLabel"
            :key="item.prop"
            :label="item.label"
            :width="item.width ? item.width : ''"
          >
            <template slot-scope="scope">
              <div v-if="item.type=='checkBox'" class="table-checkBox">
                <el-checkbox-group v-model="scope.row[item.prop]">

                  <el-checkbox v-for="box in item.checks" :label="box.label" :key="box.id">{{ box.label }}1
                  </el-checkbox>
                </el-checkbox-group>
              </div>

              <span v-else-if="item.edit==false"
                    :style="[{width: `${item.width}px`},]">{{ scope.row[item.prop] }}</span>

              <el-form v-else-if="item.edit==true" :model="scope.row" :style="[{width: `${item.width}px`},]">
                <el-form-item size="mini">
                  <template v-if="plus.edit">
                    <el-input
                      v-if="item.type == 'text' && scope.row['type'] == 'text'"
                      v-model="scope.row[item.prop]" type="textarea"
                      :change="check_num()"
                    ></el-input>
                    <el-input v-else v-model="scope.row[item.prop]"></el-input>
                  </template>

                  <span v-else>{{ scope.row[item.prop] }}</span>

                </el-form-item>
              </el-form>
            </template>
          </el-table-column>

        </el-table>

      </el-form-item>

    </el-form>


  </div>
</template>

<script>
export default {
  name: 'NormalForm',
  props: {
    formModel: Object, // form对象存值的地方
    config: Array,
    plus: Object,
    rules: Object // 配置表单验证规则
  },
  mounted() {
    // 初始化数组
    if (this.plus && this.plus.selectLabels) {
      this.selectArray = this.plus.selectLabels
    }
  },
  methods: {
    focusIntel(model) {
      this.focusIntelModel = model
      this.getIntelFormRecommend()
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 获取智能表单数值推荐
    getIntelFormRecommend() {
      var formProList = []
      for (var i = 0; i < this.config.length; i++) {
        formProList.push({
          prop: this.config[i].model, value: this.formModel[this.config[i].model], mean: this.config[i].name
        })
      }
      console.log('formProList:')
      console.log(formProList)
      this.intelFormRecommend = {}
    },
    showMessage(keyIndex, flag) {
      this.config[keyIndex].showMessage = flag
    },
    click(item, label) {
      this.config.filter(function (i, index) {
        if (i.id == item.connect) {
          i.edit = item.connectCodeTable[label]
        }
      })
    },
    radioUp(label) {
      // console.log(label)
      this.$emit('radioUp', label)
    },
    // 监听表单组件，如果数据不符合规则，想父组件发送对应值
    submitForm() {
      this.$refs['formModel'].validate((valid) => {
        if (valid) {
          this.$emit('valid', true)
        } else {
          this.$emit('valid', false)
        }
      });
    },
    // 选择表格的选择事件
    select(row) {
      if (this.selectArray.indexOf(row) == -1) {
        this.selectArray.push(row)
      } else {
        this.selectArray.splice(this.selectArray.indexOf(row), 1)
      }
      console.log(this.selectArray)
    },
    // 获取选中的值
    getSelectArray() {
      return this.selectArray
    }
  },
  data() {
    return {
      // 记录用户的选择行为
      selectArray: [],
      focusIntelModel: '',
      intelFormRecommend: {},
      restaurants: [{"value": "二氧化碳", "info": "企业规划书p12"},
        {"value": "甲烷", "info": "企业规划书篇13"},],
    }
  },
  watch: {
    // 深度监听表单数据变化，随时传递数据
    formModel: {
      handler(newValue, oldValue) {
        this.submitForm()
      },
      deep: true
    },
    config: {
      handler(newValue, oldValue) {
        this.submitForm()
        this.log("change config")
        this.$forceUpdate();
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.table-checkBox {
  display: flex;
  width: 500px;
}

el-table::before {
  //去除底部白线
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

// 隐藏侧边的白条
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 0px;
}

.el-form-item {
  word-break: keep-all;
}

.itemlabel .el-form-item__label {
  font-size: 12px;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .value {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .info {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .info {
      color: #ddd;
    }
  }
}

.my-icon {
  height: 30px;
  width: 30px;
  margin-top: 5px;
}
</style>
